<template>
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelPosition="top">
        <view class="hidden-title">完结信息</view>
        <cu-cell-group>
          <uni-forms-item name="startTime">
            <uni-datetime-picker v-model.trim="formData.startTime" hide-second type="datetime">
              <cu-cell title="项目实际开始时间" :description="formData.startTime" link required> </cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="endTime">
            <uni-datetime-picker v-model.trim="formData.endTime" hide-second type="datetime">
              <cu-cell title="项目实际结束时间" :description="formData.endTime" link required> </cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="completeStatus">
            <cu-cell class="cu-cell--select-v2" title="项目完成状态" required>
              <CuSelectV2
                v-model="formData.completeStatus"
                title="项目完成状态"
                placeholder="请选择项目完成状态"
                label-key="dictLabel"
                value-key="dictValue"
                :options="options"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="completeDescription">
            <cu-cell title="项目描述" column required>
              <u--textarea
                v-model="formData.completeDescription"
                placeholder="简要描述项目完成情况，便于后续查阅参考（限50字）"
                autoHeight
                maxlength="50"
              ></u--textarea>
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>
    </view>

    <view class="button-wrap">
      <view class="submit-button" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>
<script>
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import { getDicts } from '@/api/system/dict.js'
import CuSelectV2 from '@/components/cu-select-v2/cu-select-v2.vue'
import { finishWorkProject } from '@/api/spw/project'
export default {
  components: {
    CuSelectV2,
    DictPicker,
    CuCell,
    CuCellGroup
  },
  data() {
    return {
      loading: false,
      options: [],
      formData: {
        startTime: '',
        endTime: '',
        completeStatus: '',
        completeDescription: ''
      },
      rules: {
        startTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        endTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        completeStatus: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        completeDescription: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(query) {
    this.projectId = query.projectId
    getDicts('spw_project_complete_status').then((res) => {
      this.options = res.data
    })
  },
  methods: {
    async handleSubmit() {
      if (this.loading) {
        return
      }
      await this.$refs.form.validate()
      this.loading = true
      await finishWorkProject({
        ...this.formData,
        projectId: this.projectId
      }).catch(() => {
        this.loading = false
      })
      this.$modal.msgSuccess('提交成功')
      setTimeout(() => {
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('project:finished:success', {
          data: true
        })
        uni.navigateBack()
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.button-wrap {
  padding: 20px 30px;

  .submit-button {
    background: #454a5e;
    line-height: 88rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #fff;
  }
}
</style>
